<template>
  <div class="footerMusic">
    <div class="footerLeft" @click="isMusicDetail">
      <img :src="playList[playListIndex].al.picUrl" alt="" />
      <div class="leftItem">
        <span>{{ playList[playListIndex].al.name }}</span>
        <p>滑动切换下一首</p>
      </div>
    </div>
    <div class="footerRight">
      <svg class="icon" aria-hidden="true" @click="play" v-if="isBtnShow">
        <use xlink:href="#icon-24gl-playCircle"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="play" v-else>
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-caidan"></use>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"
    ></audio>
    <van-popup v-show="true" position="bottom" :style="{ height: '30%' }" />
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["playList", "playListIndex", "isBtnShow", "isMusicDetail"]),
  },
  methods: {
    //方法结构
    ...mapMutations(["updataBtnShow", "IsMusicDetail"]),
    play() {
      //判断播放转态
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.updataBtnShow(false);
      } else {
        this.$refs.audio.pause();
        this.updataBtnShow(true);
      }
    },
  },
  //事件监听
  watch: {
    playListIndex() {
      this.$refs.audio.autoplay = true;
      if (this.$refs.audio.paused) {
        this.updataBtnShow(false);
      }
    },
    playList() {
      if (this.isBtnShow) {
        this.$refs.audio.autoplay = true;
        this.updataBtnShow(false);
      }
    },
  },
};
</script>
<style lang="less">
.footerMusic {
  width: 100%;
  height: 1rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #999;
  display: flex;
  justify-content: space-between;
  .footerLeft {
    display: flex;
    padding: 0.1rem 0.2rem;
    img {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 100%;
    }
    .leftItem {
      padding: 0 0.2rem;
      display: flex;
      flex-direction: column;
      span {
        font-weight: 900;
      }
      p {
        color: #999;
      }
    }
  }
  .footerRight {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.2rem;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      margin-left: 0.1rem;
    }
  }
}
</style>
